﻿@model IEnumerable<MvcCoffeeShop.DataTransferObjects.ProductDTO>

@{
    ViewBag.Title = "Catalog";
    
    }
 
<h2>Catalog</h2>
    <div ng-app="CatalogApp" class="container">
        <div ng-controller="CatalogController">
            <table style="border-width:1px;border-style:solid;">
                
                <tr ng-repeat="item in products">
                    <td>
                        <img src="/Images/MvcCoffeeShop/{{item.PicturePath}}"/>
                    </td>
                    <td>
                         <h2>{{item.ProductName}}</h2>
                         <br />
                         <h3>{{item.ProductDesc}} <br/> {{item.UnitPrice}}</h3>
                    </td>
                    <td>
                        <h3>
                        <a href="/ShoppingCart/PendingCartItem?productid={{item.ProductID}}">Buy Now</a>
                        </h3>
                    </td>
                </tr>
            </table>
        </div>
</div>

<script type="text/javascript">

    var app = angular.module("CatalogApp", []);
 
    app.service("CatalogService", function ($http) {
        this.getCatalog = function () {
            return $http.get("/Home/ProductCatalog");
        }

    });

    app.controller("CatalogController", function ($scope, CatalogService) {
        GetAllProducts();

        $scope.getBuyNowUrl = function getQueryUrlFn(id) {
            return "/ShoppingCart/PendingCartItem?productid="+id;
        }

        function GetAllProducts() {
            
            var getAllProducts = CatalogService.getCatalog();
            getAllProducts.then(function (item) {
                $scope.products = item.data;
            }, function () {
                alert('Data not found');
            });
        }
    });

</script>



